<template>
  <div>
    <el-button type="primary" @click="handleAdd">新增</el-button>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="100px">
        <el-form-item v-for="column in columns" :key="column.prop" :label="column.label">
          <el-input v-model="form[column.prop]" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getUserList, createUser, updateUser, deleteUser } from '@/api/user';
import { User } from '@/types/user';

const tableData = ref<User[]>([]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = reactive<Partial<User>>({});
const isEdit = ref(false);

const columns = [
  { prop: 'userId', label: '用户ID' },
  { prop: 'username', label: '用户名' },
  { prop: 'password', label: '密码' },
  { prop: 'gender', label: '性别(1-男 2-女)' },
  { prop: 'nickName', label: '昵称' },
  { prop: 'avatar', label: '个人头像' },
  { prop: 'email', label: '邮箱' },
  { prop: 'birthday', label: '出生年月日' },
  { prop: 'mobile', label: '手机' },
  { prop: 'description', label: '自我简介' },
  { prop: 'loginCount', label: '登录次数' },
  { prop: 'lastLoginTime', label: '最后登录时间' },
  { prop: 'lastLoginIp', label: '最后登录IP' },
  { prop: 'ipSource', label: 'ip来源' },
  { prop: 'browser', label: '浏览器' },
  { prop: 'os', label: '操作系统' },
  { prop: 'salt', label: '随机盐' },
  { prop: 'status', label: '状态(0-开启 1-关闭)' },
  { prop: 'deleted', label: '逻辑删除(0-正常 1-删除)' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '更新时间' },
  { prop: 'createBy', label: '创建人' },
  { prop: 'updateBy', label: '更新人' },
];

const fetchData = async () => {
  const res = await getUserList();
  tableData.value = res.data;
};

const handleAdd = () => {
  dialogTitle.value = '新增';
  isEdit.value = false;
  Object.keys(form).forEach(key => delete form[key]);
  dialogVisible.value = true;
};

const handleEdit = (row: User) => {
  dialogTitle.value = '编辑';
  isEdit.value = true;
  Object.assign(form, row);
  dialogVisible.value = true;
};

const handleDelete = async (id: number) => {
  await deleteUser(id);
  fetchData();
};

const handleSubmit = async () => {
  if (isEdit.value) {
    await updateUser(form);
  } else {
    await createUser(form);
  }
  dialogVisible.value = false;
  fetchData();
};

fetchData();
</script>